<template>
    <div>
        <el-form ref="form" :model="params" label-width="70px">
            <el-container>
                <el-form-item>
                    <el-input v-model="params.caseNo" placeholder="案号搜素"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">检索</el-button>
                </el-form-item>
            </el-container>
        </el-form>


        <el-table
                :data="pageResult.records"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="caseNo"
                    label="案号"
                    width="340">
            </el-table-column>
            <el-table-column
                    prop="documentName"
                    label="归档文件"
                    width="340">
            </el-table-column>
            <el-table-column
                    prop="userRealname"
                    label="上传人"
                    width="340">
            </el-table-column>
            <el-table-column
                    prop="upddate"
                    label="最后更改日期"
                    width="340">
            </el-table-column>
            <el-table-column  fixed="right"
                              label="操作"
                              width="200" >
                <template  slot-scope="scope">
                    <el-dropdown :hide-on-click="true"  @command="handleUpdate">
                        <el-button type="primary">
                            更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="scope.row.id+'-下载'">下载</el-dropdown-item>
                            <el-dropdown-item :command="scope.row.id+'-修改'">修改</el-dropdown-item>
                            <el-dropdown-item :command="scope.row.id+'-删除'">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <el-footer class="case-exam-footer">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="pageResult.total"
                    :page-size="pageResult.size"
                    class="pagination"
                    @current-change="handleIndexChange"
            >
            </el-pagination>
        </el-footer>


        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="50%">
            <el-form ref="form" :model="OnFile" label-width="80px">
                <el-container>
                    <el-form-item label="案件">
                        <el-input v-model="OnFile.caseNo" @focus="showcaselaw" ></el-input>
                    </el-form-item>
                </el-container>
                <el-form-item label="文件夹">
                    <el-select v-model="OnFile.folderId" placeholder="选择文件夹">
                        <el-option v-for="folder in folders" :label="folder.folderName" :value="folder.id" :key="folder.id"></el-option>
                    </el-select>
                    <el-button type="primary" @click="toaddfolder">添加文件夹</el-button>
                </el-form-item>

                <el-container>
                    <el-form-item label="相关文件:">
                        <el-upload
                                name="multipartfile"
                                action="http://localhost/upload"
                                :headers="{token:this.$store.state.token}"
                                :data="{folder:'RecordDocument'}"
                                class="upload-demo"
                                ref="upload"
                                :limit="1"
                                :multiple="false"
                                :auto-upload="false"
                                :on-success="handleUploadSuccess">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-input v-model="OnFile.documentFile" v-show="false"></el-input>
                </el-container>
                <el-form-item>
                    <el-button type="primary" @click="update">修改</el-button>
                </el-form-item>

            </el-form>

        </el-dialog>


        <el-dialog
                title="提示"
                :visible.sync="dialogVisible2"
                width="50%">
            <recordcaseLaw v-if="dialogVisible2" v-on:caseNo="setcaseNo"></recordcaseLaw>
        </el-dialog>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible3"
                width="50%">
            <el-form ref="form" :model="folder" label-width="80px">
                <el-container>
                    <el-form-item label="文件夹">
                        <el-input v-model="folder.folderName" @blur="qc" ></el-input>
                    </el-form-item>
                </el-container>


                <el-form-item>
                    <el-button type="primary" @click="add">添加</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    import recordcaseLaw from './recordcaseLaw.vue'


    import FolderService from '../../../model/mfy/onFile/FolderService.js'
    var  folderService =FolderService.getInstance();

    import OnFileService from '../../../model/mfy/onFile/OnFileService.js'
    var  onFileService =OnFileService.getInstance();

    export default {
        name: "OnFile",
        data(){
            return{
                OnFile:{},
                pageResult:{},
                params:{},
                folders:[],
                folder:{},
                dialogVisible:false,
                dialogVisible2:false,
                dialogVisible3:false,
            }
        },
        methods:{
            list(){
                onFileService.list(this.params).then((response)=>{
                    this.pageResult=response.data.data
                })
            },

            qc(){
                folderService.qc(this.folder.folderName).then((response)=>{

                    console.log(response.data.code)
                    if(response.data.code=='400'){
                        this.$message.error(response.data.message)
                        this.folder.folderName=''
                    }

                })
            },

            handleUpdate(val){
                var value =val.split("-");
                console.log(value)
                if(value[1]=='下载'){
                    this.upload(value[0])
                }else if(value[1]=='修改'){
                    onFileService.getOne(value[0]).then((response)=>{
                        this.dialogVisible=true;

                        this.OnFile=response.data.data
                        this.OnFile.documentFile='';
                        this.OnFile.documentName='';
                        console.log(this.OnFile)
                    })
                }else if(value[1]=='删除'){
                    this.del(value[0])
                }



            },
            toaddfolder(){
                this.dialogVisible3=true;
            },
            setcaseNo(caseno){
                this.OnFile.caseNo=caseno;
                this.dialogVisible2=false;
            },
            upload(id){
                onFileService.getOne(id).then((response)=>{
                    location.href = response.data.data.documentFile
                })
            },
            SelectFolder(){
                folderService.SelectFolder().then((response)=>{
                    this.folders = response.data.data
                })
            },
            add(){
                folderService.save(this.folder).then(()=>{
                    this.dialogVisible3=false;
                    this.SelectFolder()
                })
            },
            del(id){
                onFileService.del(id).then((response)=>{
                    if(response.data.code=='400'){
                        this.$message.error(response.data.message);
                        return;
                    }
                    this.list();
                })
            },
            handleIndexChange(index){
                this.params.page = index
                this.list()
            },
            search(){
                this.params.page=1
                this.list()
            },
            update(){
                if(this.OnFile.caseNo==null || this.OnFile.caseNo=='' ){
                    this.$message.error("案件不能为空")
                    return;
                }
                if(this.OnFile.folderId==null || this.OnFile.folderId=='' ){
                    this.$message.error("文件夹不能为空")
                    return;
                }

                if(this.OnFile.documentFile==null || this.OnFile.documentFile=='' ){
                    this.$message.error("请选择文件!")
                    return;
                }

                onFileService.update(this.OnFile).then(()=>{
                    this.dialogVisible=false;
                    this.list();
                })
            },
            submitUpload(){
                this.$refs.upload.submit();
            },
            handleUploadSuccess(response,file){
                this.OnFile.documentName = file.name
                this.OnFile.documentFile = response.data
            },
            showcaselaw(){
                this.dialogVisible2=true
            },
        },
        created() {
            this.SelectFolder();
            this.list()
        },
        components:{
            recordcaseLaw
        }
    }
</script>

<style scoped>

</style>